<div class="container" [ngClass]="{'fixed-anchor': anchorShow}">
    <!-- WRAPPER -->
    <div class="container-wrapper wrapper-bg">
        <!-- HEADER -->
        <div class="container-header"
            [ngStyle]="{background:'url('+deployUrl+'assets/img/end-year/common/bg-header.png) center top/100% no-repeat,url('+deployUrl+'assets/img/end-year/common/bg-footer.png) center bottom / 100% no-repeat,url('+deployUrl+'assets/img/end-year/common/bg-center.png) center 1.7rem / 100% calc(100% - 3.32rem) no-repeat'}">
            <!-- 标题 -->
            <img class="container-header__title" src="{{deployUrl}}assets/img/end-year/male/male-title-2.png"
                alt="决赛规则">
            <!-- 规则 -->
            <div class="container-header__rule">
                <p>
                    1、活动时间：12月9日 00:00:00~23:59:59；
                </p>
                <p>2、仅限晋级的10名主播参与；</p>
                <p>
                    3、比赛开始后榜单从<span class="emphasize">0统计新秀值</span>，最终榜单前3名主播获得最终奖励;
                </p>
                <p>
                    4、获取新秀值的方法：活动期间，主播开播在本房间内收礼，按照1钻石=1新秀值，收到宝箱礼物按照宝箱开出的礼物实际价格统计，收到神秘商店产出的礼物按1钻石=1.5新秀值统计。
                </p>
            </div>
        </div>
        <!-- MAIN -->
        <div class="container-main"
            [ngStyle]="{background:'url('+deployUrl+'assets/img/end-year/common/bg-header.png) center top / 100% no-repeat,url('+deployUrl+'assets/img/end-year/common/bg-center.png) center 1.7rem / 100% calc(100% - 1.7rem) no-repeat'}">
            <!-- 分割线 -->
            <!-- <div class="container-main__divider"
                [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/rule-divider.png)'">
            </div> -->
            <!-- 活动已结束 -->
            <div *ngIf="status===3" class="container-main__end"
                [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/activity-end-bg.png)'">
                活动已结束
            </div>
            <!-- 安全区 -->
            <!-- <div class="container-main__area area-1"
                [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/area-1.png)'">
            </div> -->
            <!-- TOP3 -->
            <div class="container-main__top3"
                [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/shenhao/shenhao-top3-bg.png)'">
                <!-- TOP3-1,2,3 -->
                <div class="top3-item" *ngFor="let anchor of top3List,let i = index" [ngClass]="'top3-'+(i+1)">
                    <div class="top3--avatar"
                        [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/shenhao/shenhao-top3-avatar-'+(i+1)+'.png)'"
                        (click)="goToRoom(anchor)">
                        <img [src]="anchor.avatarUrl | headImg" [alt]="anchor.nickname">
                        <ng-container *ngIf="anchor.liveStatus">
                            <img *ngIf="isAndroid" class="top3--avatar__live"
                                [src]="deployUrl+'assets/img/end-year/common/live.png'" alt="直播中">
                            <img *ngIf="!isAndroid" class="top3--avatar__live"
                                [src]="deployUrl+'assets/img/end-year/common/live.png'" alt="直播中">
                        </ng-container>
                    </div>
                    <div class="top3--nickname">{{anchor.nickname}}</div>
                    <div class="top3--value">新秀值:{{anchor.score | withHundredMillion}}</div>
                    <!-- top-1 不展示距上名 展示mvp标签 -->
                    <div class="top3--gap" *ngIf="anchor.rank !== 1">{{anchor.rankDesc}}</div>
                    <div class="top3--tag" *ngIf="anchor.rank === 1">
                        <img src="{{deployUrl}}assets/img/end-year/common/top3-mvp.png" alt="第一名">
                    </div>
                </div>
            </div>
            <!-- OTHERS -->
            <div class="container-main__others">
                <div class="others-header"
                    [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/others-header-bg.png)'">
                    <div class="index">排名</div>
                    <div class="detail">用户信息</div>
                    <div class="value">新秀值</div>
                </div>
                <div class="others-main"
                    [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/others-main-bg.png)'" #main>
                    <!-- placeholder -->
                    <div *ngIf="othersList.length === 0" class="other-main__holder">
                        暂无数据
                    </div>
                    <!-- item -->
                    <div *ngFor="let anchor of othersList" class="others-main__item"
                        [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/others-main-item-bg.png)'">
                        <div class="index">{{anchor.rank}}</div>
                        <div class="detail">
                            <div class="detail-avatar" (click)="goToRoom(anchor)">
                                <img class="detail-avatar__main" [src]="anchor.avatarUrl" alt="">
                                <ng-container *ngIf="anchor.liveStatus">
                                    <img *ngIf="isAndroid" class="detail-avatar__live"
                                        [src]="deployUrl+'assets/img/end-year/common/live.png'" alt="直播中">
                                    <img *ngIf="!isAndroid" class="detail-avatar__live"
                                        [src]="deployUrl+'assets/img/end-year/common/live.png'" alt="直播中">
                                </ng-container>
                            </div>
                            <div class="detail-info">
                                <div class="detail-info--name">{{anchor.nickname}}</div>
                                <div class="detail-info--gap">
                                    {{anchor.rankDesc}}
                                </div>
                            </div>
                        </div>
                        <div class="value">{{anchor.score | withHundredMillion}}</div>
                    </div>
                    <!-- spinner -->
                    <div class="others-main__spinner">
                        <div class="spinner-content" (click)="getMore()">
                            <ng-container *ngIf="pageSize<100&&othersList.length+3===pageSize; else tips">
                                查看更多
                            </ng-container>
                            <ng-template #tips>
                                {{othersList.length+3===100?'本榜单只显示前100名':loading?'.....':''}}
                            </ng-template>
                        </div>
                    </div>
                </div>
                <div class="others-footer"
                    [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/others-main-footer-bg.png)'">
                </div>
            </div>
        </div>
        <div class="container-footer"
            [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/bg-footer.png)'">
            <p *ngIf="!isAndroid&&!isPC">声明：本活动与Apple Inc.无关</p>
            <p>请用户注意，适度娱乐，理性消费</p>
        </div>
        <!-- 直播间主播 -->
        <div class="others-main__item"
            [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/others-main-item-bg-unique.png)'">
            <div class="index">{{currentAnchorInfo.rank}}</div>
            <div class="detail">
                <div class="detail-avatar" (click)="goToRoom(currentAnchorInfo)">
                    <img class="detail-avatar__main" [src]="currentAnchorInfo.avatarUrl | headImg" alt="">
                    <!-- <ng-container *ngIf="currentAnchorInfo.liveStatus">
                        <img *ngIf="isAndroid" class="detail-avatar__live"
                            [src]="deployUrl+'assets/img/end-year/common/live.png'" alt="直播中">
                        <img *ngIf="!isAndroid" class="detail-avatar__live"
                            [src]="deployUrl+'assets/img/end-year/common/live.png'" alt="直播中">
                    </ng-container> -->
                </div>
                <div class="detail-info">
                    <div class="detail-info--name">{{currentAnchorInfo.nickname}}</div>
                    <div class="detail-info--gap">{{currentAnchorInfo.rankDesc}}</div>
                </div>
            </div>
            <div class="value">{{currentAnchorInfo.score | withHundredMillion}}</div>
        </div>
    </div>
</div>